import React, {useState} from "react";
import {Button, DatePicker, Divider, Flex, Form, Input, Select, Space, Table} from "antd";
import {useNavigate} from "react-router-dom";
import {PageWrapperBox, SearchFormBox, TableContainerBox} from "@/layout/Page";
import {selectOptions} from "@/components/DictTag";
import {
    DownloadOutlined,
    PlusOutlined,
    RedoOutlined,
    ReloadOutlined,
    SearchOutlined,
    SwapOutlined
} from "@ant-design/icons";
import EditDialog from "@/pages/system/role/editDialog.tsx";

const {RangePicker} = DatePicker;

export default function () {

    const [data, setData] = useState([])
    const [loading, setLoading] = useState(false)
    const [total, setTotal] = useState(0)
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const [queryParams, setQueryParams] = useState({
        pageNum: 1,
        pageSize: 10,
    })

    const editDialogRef = React.createRef<any>()


    const getTableDateList = () => {

    }

    const handleRefresh = () => {
        form.resetFields()
        getTableDateList()
    }


    const columns = [
        {
            title: '字典名称',
            dataIndex: 'artTitle',
            key: 'artTitle',
            width: 200,
        },
        {
            title: '字典类型',
            dataIndex: 'artCategoryId',
        }
    ]


    return <PageWrapperBox>
        <SearchFormBox>
            <Form form={form} layout={"inline"} colon={false}>
                <Form.Item name="artTitle" label="字典名称">
                    <Input placeholder="请输入角色名称"></Input>
                </Form.Item>
                <Form.Item name={"artCategoryId"} label="字典类型">
                    <Input placeholder="请输入权限字符"></Input>
                </Form.Item>
                <Form.Item name={"status"} label="状态">
                    <Select style={{width: 120}} placeholder="请选择状态">
                        {/*{selectOptions(dictData.status)}*/}
                    </Select>
                </Form.Item>
                <Form.Item name={"status"} label="创建时间">
                    <RangePicker>

                    </RangePicker>
                </Form.Item>
                <Form.Item>
                    <Space>
                        <Button icon={<SearchOutlined/>} type="primary" onClick={getTableDateList}>查询</Button>
                        <Button icon={<RedoOutlined/>} onClick={handleRefresh}>重置</Button>
                    </Space>
                </Form.Item>
            </Form>
        </SearchFormBox>

        <TableContainerBox>
            <Flex align="center" gap="small" style={{marginBottom: 6}}>
                <Button type={"primary"} icon={<PlusOutlined/>}
                        onClick={() => editDialogRef.current.addModal()}>新增</Button>
                <Button type={"default"} icon={<DownloadOutlined />}>导出</Button>
                <Button type={"default"} icon={<ReloadOutlined />}>刷新缓存</Button>
            </Flex>
            <Table
                rowKey="menuId"
                loading={loading}
                tableLayout="auto"
                dataSource={data}
                columns={columns}
                scroll={
                    {x: 'auto'}
                }
                pagination={false}
            >
            </Table>
        </TableContainerBox>
        <EditDialog ref={editDialogRef} getList={getTableDateList}/>
    </PageWrapperBox>


}
